<!--
 * @Descripttion: 
 * @Author: YuZhenJing
 * @Date: 2020-01-15 09:58:45
 * @LastEditors  : YuZhenJing
 * @LastEditTime : 2020-01-16 09:48:00
 -->
<template>
  <div class="menu-points-list">
    <tf-drawer :title="title" :visible.sync="tfVisible" size="40%">
      <template v-slot:content>
        <div style="padding:5px;">
          <el-row :gutter="12">
            <el-col :span="12">
              <el-input
                clearable
                placeholder="功能点名称"
                size="mini"
                v-model="searchParams.funPointsName"
              ></el-input>
            </el-col>
            <el-col :span="12" style="text-align: left">
              <el-button
                :loading="tableDataParam.loading"
                @click="request"
                icon="el-icon-search"
                size="mini"
                type="primary"
                >查询</el-button
              >
              <el-button
                @click="addPoints"
                icon="el-icon-circle-plus-outline"
                size="mini"
                type="primary"
                >新增</el-button
              >
            </el-col>
          </el-row>
        </div>
        <tf-page
          :current-page="tableDataParam.paginationData.currentPage"
          :data="tableDataParam.data"
          :loading="tableDataParam.loading"
          :pageSize="tableDataParam.paginationData.pageSize"
          :sort-item="tableDataParam.paginationData.sortItem"
          :total="tableDataParam.paginationData.total"
          @doChangeCurrentPage="doChangeCurrentPage"
          @doChangePageSize="doChangePageSize"
          @selectedRow="selectedRow"
          @sortChange="sortChange"
          height="calc(100vh - 142px)"
          layout="prev, pager, next"
        >
          <el-table-column
            label="功能点编号"
            prop="funPointsCode"
          ></el-table-column>
          <el-table-column
            label="功能点名称"
            prop="funPointsName"
          ></el-table-column>
          <el-table-column
            align="center"
            label="默认选中"
            prop="defaultSelect"
            width="80"
          ></el-table-column>
          <el-table-column align="center" label="操作" prop="userId" width="80">
            <template slot-scope="scope">
              <el-row>
                <el-col :span="12">
                  <i
                    @click="editPoints(scope.row)"
                    class="el-icon-edit"
                    style="color:green;cursor:pointer"
                  ></i>
                </el-col>
                <el-col :span="12">
                  <i
                    @click="delPoints(scope.row)"
                    class="el-icon-delete"
                    style="color:red;cursor:pointer"
                  ></i>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </tf-page>
      </template>
    </tf-drawer>
    <menu-points-add
      :defaultSelectOptions="defaultSelectOptions"
      @request="request"
      ref="menuPointsAddRef"
    ></menu-points-add>
    <menu-points-edit
      :defaultSelectOptions="defaultSelectOptions"
      @request="request"
      ref="menuPointsEditRef"
    ></menu-points-edit>
  </div>
</template>
<script>
import * as menuPointsManager from '@/service/menu/menuPointsList'
export default {
  components: {
    'tf-page': require('@/components/common/page/TfPage').default,
    'tf-drawer': require('@/components/common/drawer/TfDrawer').default,
    'menu-points-add': require('@/components/module/menu/MenuPointsAdd')
      .default,
    'menu-points-edit': require('@/components/module/menu/MenuPointsEdit')
      .default
  },
  data() {
    return {
      tfVisible: false,
      title: '功能点管理',
      defaultSelectOptions: [],
      searchParams: {
        funListCode: '',
        funPointsName: ''
      },
      //分页表格相关参数
      tableDataParam: {
        loading: false,
        data: [],
        selectedData: [],
        paginationData: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          sortItem: {
            prop: 'default_select',
            order: 'descending'
          }
        }
      }
    }
  },
  methods: {
    ...menuPointsManager,
    show(funListCode) {
      if (funListCode) {
        this.searchParams.funListCode = funListCode
        this.request()
        this.tfVisible = true
      } else {
        this.$alert('功能清单编码不能为空，无法进入功能点管理', '提示', {
          type: 'warning',
          confirmButtonText: '确定'
        })
      }
    },
    // 排序
    sortChange(sortItem) {
      this.tableDataParam.paginationData.sortItem = {
        prop: sortItem.prop,
        order: sortItem.order
      }
      this.request()
    },
    // 选择下拉框页码
    doChangePageSize(pageSize) {
      this.tableDataParam.paginationData.pageSize = pageSize
      this.request()
    },
    // 更改页码
    doChangeCurrentPage(currPage) {
      this.tableDataParam.paginationData.currentPage = currPage
      this.request()
    },
    // 选择行
    selectedRow(selection) {
      this.tableDataParam.selectedData = selection
    }
  },
  mounted() {
    this.searchDefaultSelectOptions()
  }
}
</script>
<style lang="stylus" scope></style>
